<template>
  <div class="order-main">

    <el-card shadow="never">
      <div slot="header">
        <span>查询条件</span>
      </div>
      <el-form ref="form" :model="search" label-width="80px" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="search.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型">
              <el-select v-model="search.orderType" value-key="" placeholder="" clearable filterable>
                <!-- 订单类型：0->正常订单；1->秒杀订单 , -->
                <el-option label="正常订单" :value="0" />
                <el-option label="秒杀订单" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-button size="small">取消</el-button>
            <el-button size="small" type="primary" @click="doSearch">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 订单列表 -->
    <el-card shadow="never" style="margin: 30px;">
      <div slot="header">
        <span>订单信息</span>
      </div>
      <el-table :data="orderList" border stripe>
        <el-table-column
          type="index"
          label="#"
          :width="50"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"
          :width="200"
        />
        <el-table-column
          label="订单信息"
          :width="200"
        >
          <template slot-scope="scope">
            <p>支付金额: {{ scope.row.totalAmount | money }}</p>
            <p>商品数量: {{ scope.row.totalQuantity }}</p>
          </template>
        </el-table-column>
        <!-- 支付方式：0->未支付；1->支付宝；2->微信  -->
        <el-table-column
          prop="payType"
          label="支付方式"
          align="center"
          :width="100"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.payType === 0">未支付</p>
            <!-- svg是当作字体看的,所以不能写宽高 -->
            <svg-icon v-if="scope.row.payType === 2" icon-class="icon_wxPay" class-name="icon-pay" />
            <svg-icon v-if="scope.row.payType === 1" icon-class="icon_aliPay" class-name="icon-pay" />
          </template>
        </el-table-column>
        <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单 -->
        <el-table-column
          prop="status"
          label="订单状态"
          :width="200"
          align="center"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.status === 0">待付款</p>
            <p v-if="scope.row.status === 1">待发货</p>
            <p v-if="scope.row.status === 2">已发货</p>
            <p v-if="scope.row.status === 3" style="color:red">已完成</p>
            <p v-if="scope.row.status === 4">已关闭</p>
            <p v-if="scope.row.status === 5">无效订单</p>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          :width="200"
        />
        <el-table-column
          prop="memberUsername"
          label="用户账号"
          :width="200"
        />
        <el-table-column
          label="操作"
          :width="200"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="goOrderDetail(scope.row.id)">订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page.sync="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="sizeChange"
        @current-change="currentChange"
      />

    </el-card>

  </div>
</template>

<script>
import { findOrdersByPage as orderListApi } from '@/api/order'
import mixin from '@/mixins'
export default {
  components: {

  },
  mixins: [mixin],
  data() {
    return {
      search: {}, // 搜索条件
      orderList: [] // 订单列表

    }
  },
  computed: {

  },
  created() {
    // 初始化订单数据
    this.getOrderList()
  },
  mounted() {

  },
  methods: {
    // 获取订单信息
    getOrderList() {
      const { start, limit } = this.page
      orderListApi(start, limit)
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { total, rows } = data
            //
            this.orderList = rows
            this.page.totalCount = total
            // console.log(rows)
          } else {
            this.$message.err(errMsg)
          }
        })
    },
    //
    sizeChange(v) {
      this.page.limit = v
      this.getOrderList()
    },
    currentChange(v) {
      this.page.start = v
      this.getOrderList()
    },
    // 查看订单详情
    goOrderDetail(id) {
      this.$router.push({ name: 'orderDetail', params: { id }})
    },
    doSearch() {

    }
  }
}
</script>

<style scoped lang="scss">
  .order-main{
    .icon-pay{
      font-size: 40px;
    }
  }
</style>
